<template>
  <div>
    <el-card class="div-box-card">

      <el-card class="video-box-card div-box-card" >

        <video
          id="singleVideo"
          width="600px"
          height="400px"
          class="video-js vjs-default-skin vjs-big-play-centered"
          controls
          poster="../assets/main.jpg"
          playsinline
          webkit-playsinline
          controls
          x-webkit-airplay="true"
          x5-video-player-fullscreen="true"
          x5-video-player-typ="h5"
         
        >
        </video>
      </el-card>
      <h2>正在播放{{number}}</h2>
      <el-divider></el-divider>
      <el-form
        :inline="true"
        :model="formInline"
      >

        <el-form-item>
          <el-input
            placeholder="请输入搜索内容"
            v-model="formInline.wd"
            clearable
          >
          </el-input>

        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="query"
            :loading="fullscreenLoading"
          >搜索</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-row :gutter="15">
          <el-col
            :span="8"
            v-for="(video , index) in videoData"
            :key="index"
          >
            <el-card class="box-card">
              <div>
                <div>
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="video.vodPic"
                  ></el-image>
                  <div>
                    <el-tag type="success">
                      {{ video.vodName }}
                    </el-tag>
                    <el-tag>
                      {{ video.vodYear }}
                    </el-tag>
                    <el-tag>
                      {{ video.vodArea }}
                    </el-tag>
                    <el-tag>
                      {{ video.vodLanguage }}
                    </el-tag>
                    <el-tag>
                      {{ video.listName }}
                    </el-tag>
                    <el-tag type="warning">
                      {{ video.vodRemarks }}
                    </el-tag>
                  </div>
                  <div>{{video.vodContent}}</div>

                  <el-tag
                    v-for="item in video.vodList"
                    :key="item.name"
                    type="danger"
                    effect="dark"
                    @click="changeSource(item.name,item.vodUrl)"
                  >
                    {{ item.name }}
                  </el-tag>

                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>



<script>
// import "video.js/dist/video-js.css";
import "videojs-contrib-hls";

import Video from "video.js";

import { videoParse } from "../api/video.js";

export default {
  data() {
    return {
      input: "",
      formInline: {
        wd: ""
      },
      videoData: [],
      fullscreenLoading: false,
      number: "cctv-1"
    };
  },

  created() {
    setTimeout(() => {
      //var player = videojs("singleVideo");

      //初始化视频方法
      let player = this.$video(singleVideo, {
        //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls: true,
        //自动播放属性,muted:静音播放
        autoplay: "true",
        //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: "auto",
        //设置视频播放器的显示宽度（以像素为单位）
        width: "600px",
        //设置视频播放器的显示高度（以像素为单位）
        height: "400px",
        // 视频封面
        poster: "../assets/main.jpg",
        controlBar: {
          //点触显示控制条
          playToggle: true
        }
      });
      player.src({
        src: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8"
      });
      player.play();
    }, 1500);
  },
  methods: {
    query() {
      this.fullscreenLoading = true;
      videoParse(this.formInline)
        .then(resp => {
          this.videoData = resp.data;
        })
        .catch(err => {});
      this.fullscreenLoading = false;
    },
    changeSource: function(name, videoUrl) {
      let player = this.$video(singleVideo);
      player.src({
        src: videoUrl
      });
      this.number = name;
    }
  }
};
</script>


<style>
.div-box-card {
  text-align: center;
  border-radius: 20px;
  /* position: absolute; */
  left: 50%;
  top: 30%;
  /* transform: translate(-50%, -50%); */
}
.el-tag + .el-tag {
  margin-left: 10px;
  margin-top: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.video-box-card {
  width: 680px;
  border-radius: 30px;
  margin-left: 30%;
  padding-left: 40px;
}
.box-card {
  border-radius: 20px;
   margin-left: 10%;

}
</style>
